<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>3、绑定class___在组件上使用</title>
</head>
<body>

<div id="app">
<!--    <my-component :class="{'active':isActive}"></my-component>-->
       <my-component :class="{'active':isActive}"></my-component>
</div>

<!--  <p class="article active">一些文本</p>  -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">

    /**
     *注意这种用法仅仅适用于自定义组件的最外层是一个根元素，否则会失效。当不满足这种条件或需要给具体的子元素设置类名时，
     * 应当使用组件的props来传递。
     *
     * */
    Vue.component("my-component",{
        template:'<p class="article">一些文本</p>',
    });

    var app= new Vue({
        el:"#app",
        data:{
            isActive:true,
        }
    })
</script>
</body>
</html>